<template>
  <div class="red-table">
    <el-table
      :data="dataList"
      border
      @selection-change="handleSelectionChange"
      v-bind="childrenProps"
    >
      <!-- select column -->
      <el-table-column
        v-if="isShowSelectColumn"
        type="selection"
        width="50"
        align="center"
      ></el-table-column>
      <!-- index column -->
      <el-table-column
        v-if="isShowSerialNumberColumn"
        label="序号"
        type="index"
        align="center"
        width="50"
      ></el-table-column>
      <!-- 上面就是一列,他会自动去userList里面匹配每一项的 prop label width -->
      <!-- 开始遍历 -->
      <template v-for="propItem in propList" :key="propItem.prop">
        <el-table-column v-bind="propItem" align="center" show-overflow-tooltip>
          <!-- 使用了默认的插槽 -->
          <template #default="scoped">
            <!-- 在插槽里面又封装了一个自己的插槽, 插槽的name由propItem.slotName决定,只要这条属性加了slotName这个字段,我就给你准备了专属插槽. 前面使用了默认作用域插槽得到scope,scope有我传给这个标签(组件)的所有属性 又:row="scoped.row"再将row传递出去, 给插槽的目的是让外界可以单独给这列数据操作,单独操作这列数据 -->
            <slot :name="propItem.slotName" :row="scoped.row">
              <!-- 具名插槽里面的内容会默认显示
              如果使用组件时指定使用了这个具名插槽会将里面的内容替换 -->
              {{ scoped.row[propItem.prop] }}
            </slot>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <div class="footer">
      <slot name="footer">
        <div class="demo-pagination-block" v-if="showPagination">
          <span class="demonstration"></span>
          <el-pagination
            :page-sizes="[10, 20, 30, 40, 50]"
            :currentPage="page.currentPage"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="dataListCount"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </slot>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    dataList: {
      type: Array,
      required: true
    },
    dataListCount: {
      type: Number,
      default: 0
    },
    propList: {
      type: Array,
      required: true
    },
    // 控制table分页
    page: {
      type: Object,
      default: () => ({})
    },
    isShowSerialNumberColumn: {
      type: Boolean,
      default: false
    },
    isShowSelectColumn: {
      type: Boolean,
      default: false
    },
    // 需要使用展开列表
    childrenProps: {
      type: Object,
      default: () => ({})
    },
    showPagination: {
      type: Boolean,
      default: true
    }
  },
  emits: ['selectChange', 'update:page'],
  setup(props, { emit }) {
    const handleSelectionChange = (val: any) => {
      emit('selectChange', val);
    };

    // 页面下一页的逻辑
    // watch(props)
    const handleCurrentChange = (currentPage: number) => {
      emit('update:page', { ...props.page, currentPage });
    };
    const handleSizeChange = (pageSize: number) => {
      emit('update:page', { ...props.page, pageSize });
    };

    return { handleSelectionChange, handleSizeChange, handleCurrentChange };
  }
});
</script>

<style scoped lang="less">
.red-table {
  padding: 0 20px;
  .footer {
    padding-bottom: 20px;
    .demo-pagination-block {
      width: 500px;
      padding-top: 10px;
      margin: 0 auto;
    }
  }
}
</style>
